<!--
 * Copyright ©
 * #  
 * @author: zw
 * @date: 2021-12-07 
 -->

<template>
  <el-upload
    class="upload-demo"
    action="http://127.0.0.1:3000/upload"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :file-list="fileList"
    :before-upload="beforeUpload"
    :on-success="success"
    list-type="picture-card"
  >
    <template #tip>
      <div class="el-upload__tip">
        jpg/png files with a size less than 500kb
      </div>
    </template>
  </el-upload>
</template>

<script lang="js">
import { defineComponent, reactive, toRefs } from 'vue'
import { uploadmerge } from '@/api'
const chunkSize = 1024 * 1024 * 4;
export default defineComponent({
  name: 'tempFile',
  setup(props, {emit, slots}) {
    const state = reactive({
      fileList: [],
    });
    const handlePreview = (file) => {}
    const handleRemove = (file, fileList) => {}
    const beforeUpload = (file) => {
      const formData = new FormData();
      const start = 0 * chunkSize;
      const extend = file.name.slice('.')[file.name.split('.').length-1]
      if (start > file.size) return merge(file.name);
      const blob = file.slice(start, start + chunkSize);
      const blobName = `${file.name}.0.${extend}`;
      const blobFile = new File([blob], blobName);
      formData.append('file', blobFile);
    }
    const success = () => {
      uploadmerge({name: 'DSCF3606'})
    }
   return {
     ...toRefs(state),
     handlePreview,
     handleRemove,
     beforeUpload,
     success
    }
   }
})
</script>

<style lang="css" scoped></style>
